<template>
    <!-- 验证码组件容器，点击时刷新验证码 -->
    <div class="ValidCode disabled-select" style="width: 100%; height: 100%" @click="refreshCode">
        <!-- 循环渲染每个验证码字符，应用随机样式 -->
        <span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{item.code}}</span>
    </div>
</template>

<script>
    export default {
        name: 'validCode',
        data () {
            return {
                length: 4,       // 验证码长度
                codeList: []     // 验证码字符列表
            }
        },
        // 组件挂载后自动生成验证码
        mounted () {
            this.createdCode()
        },
        methods: {
            // 刷新验证码方法
            refreshCode () {
                this.createdCode()
            },
            // 生成验证码的核心方法
            createdCode () {
                let len = this.length,
                    codeList = [],
                    // 验证码字符集，不包含容易混淆的字符
                    chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789',
                    charsLen = chars.length
                // 生成随机验证码
                for (let i = 0; i < len; i++) {
                    // 随机RGB颜色值
                    let rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
                    codeList.push({
                        code: chars.charAt(Math.floor(Math.random() * charsLen)),  // 随机字符
                        color: `rgb(${rgb})`,                                      // 随机颜色
                        padding: `${[Math.floor(Math.random() * 10)]}px`,          // 随机内边距
                        transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)` // 随机旋转角度
                    })
                }
                // 更新验证码列表
                this.codeList = codeList
                // 将生成的验证码字符串发送给父组件
                this.$emit('update:value', codeList.map(item => item.code).join(''))
            },
            // 生成每个字符的样式
            getStyle (data) {
                return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
            }
        }
    }
</script>

<style>
    /* 验证码容器样式 */
    .ValidCode{
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;  /* 鼠标指针样式，表明可点击 */
    }
    /* 验证码字符样式 */
    .ValidCode span {
        display: inline-block;
        font-size: 18px;
    }
</style>